<script setup>
import { ref, reactive } from 'vue'
import { CirclePlus, Delete, Folder, UserFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import LayoutRightContainer from '@/views/layout-right-container.vue'
import { fetchAccountBasic, fetchAccountCreate, fetchAccountDestroy } from '@/api/account.services'
import { fetchRoleBasic } from '@/api/role'
const breadcrumb = ref([
    { label: '系统管理' },
    { label: '用户管理' },
    { label: '账户管理' }
])
const userList = ref([]);
const active_id = ref(1);
const getUserList = async () => {
    const result = await fetchAccountBasic()
    if (result.code == 1) {
        userList.value = result.data
        info.value = userList.value[0]
        active_id.value = 1
    }
}
const info = ref({})
const userItem = item => {
    active_id.value = item.id
    info.value = item
}
const infoRef = ref(null)
const infoRules = reactive({
    //定义验证规则，有两种方式：
    //1.使用ele原生的验证规则。
    username: [{ required: true, message: '请输入登录账户', trigger: 'blur' }],
    role: [{ required: true, message: '请选择账户角色', trigger: 'change' }],
    password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
    status: [{ required: true, message: '请选择账户状态', trigger: 'change' }]
})
const onSubmit = async () => {
    try {
        const valid = await infoRef.value.validate()
        if (!valid) return
        const result = await fetchAccountCreate(info.value)
        if (result.code == 1) {
            getUserList()
            ElMessage.success(info.value?.id ? '修改成功' : '创建成功')
        }
    } catch (error) {
        console.log(error)
    }
}
const roleList = ref([])
const getRoleList = async () => {
    const result = await fetchRoleBasic()
    if (result.code == 1) {
        roleList.value = result.data
    }
}
const delUser = async () => {
    if (!active_id) {
        ElMessage.error('请选择要删除的用户')
        return
    }
    try {
        await ElMessageBox.confirm('确定删除所选用户吗？')
        const result = await fetchAccountDestroy({ id: active_id.value })
        if (result.code == 1) {
            getUserList()
            ElMessage.success('删除成功')
        }

    } catch (error) {
        console.log(error)
    }
}
getUserList()
getRoleList()
</script>
<template>
    <LayoutRightContainer :breadcrumb="breadcrumb">
        <div :class="$style['account-container']">
            <div :class="$style['left-container']">
                <div :class="$style['flex-between']">
                    <el-link :underline="false" :icon="CirclePlus" @click="active_id = 0; info = {}"></el-link>
                    <el-link :underline="false" :disabled="!active_id || active_id == 1" :icon="Delete"
                        @click="delUser()"></el-link>
                </div>
                <div :class="[$style['role_type_item'], active_id === item.id ? $style['item_active'] : '']"
                    v-for="item in userList" :key="item.id" @click="userItem(item)">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>{{ item.username }}</span>
                </div>
            </div>
            <div :class="$style['right-container']">
                <el-form :model="info" label-width="120px" ref="infoRef" :rules="infoRules"
                    :class="$style['form-wrapper']">
                    <div :class="$style['title-wrapper']">账号信息</div>
                    <el-form-item label="登录账号" prop="username">
                        <el-input v-model="info.username" :disabled="active_id == 1" placeholder="登录账号" clearable />
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input type="password" v-model="info.password" placeholder="登陆密码" clearable />
                    </el-form-item>
                    <el-form-item label="所属角色" prop="role">
                        <el-select v-model="info.role" placeholder="所属角色" :disabled="active_id == 1" clearable>
                            <el-option v-for="(item, index) in roleList" :key="index" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="账户状态" prop="status" v-if="info.id !== 1">
                        <el-switch v-model="info.status" :active-value="1" :inactive-value="2" active-text="启用"
                            inactive-text="禁用" />
                    </el-form-item>
                    <div class="remrk">人员资料</div>
                    <el-form-item label="人员姓名">
                        <el-input v-model="info.name" placeholder="人员姓名" clearable />
                    </el-form-item>
                    <el-form-item label="人员性别">
                        <el-radio-group v-model="info.sex">
                            <el-radio :value="1">男</el-radio>
                            <el-radio :value="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker v-model="info.birthday" type="date" placeholder="出生日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" clearable />
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="info.id_num" placeholder="身份证号" clearable />
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="info.phone" placeholder="联系方式" clearable />
                    </el-form-item>
                    <!-- <el-form-item label="海康账户">
                        <el-input v-model="info.other_user" placeholder="关联第三方账户" clearable />
                    </el-form-item>
                    <el-form-item label="海康账户密码">
                        <el-input v-model="info.other_pass" type="password" placeholder="关联第三方账户密码" clearable />
                    </el-form-item> -->
                    <el-form-item>
                        <el-button style="width:120px;" type="primary" @click="onSubmit">确认</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </LayoutRightContainer>
</template>
<style lang="scss" module>
.account-container {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 8px;
    height: 100%;
}

.left-container {
    flex: 240px 0 0;
    overflow-y: auto;
    border-right: 1px solid rgba(50, 58, 78, 0.16);
    padding: 0 10px;
    @include scrollbar
}

.flex-between {
    display: flex;
    height: 35px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(50, 58, 78, 0.16);

    & [class~='el-icon'] {
        font-size: 16px;
    }
}

.role_type_item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 40px;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    color: #606266;
    padding: 0 10px;
    margin-top: 2px;
    cursor: pointer;

    & [class~='el-icon'] {
        margin-right: 10px;
    }

    & img {
        margin-right: 10px;
    }
}

.role_type_item:hover {
    background-color: rgba(47, 125, 241, 0.12);
    border-radius: 6px;
}

.item_active {
    background-color: rgba(47, 125, 241, 0.12) !important;
    border-radius: 6px;
    color: rgb(47, 125, 241);
    font-weight: 600;
}

.right-container {
    flex: 1;
    height: 100%;
    padding-left: 40px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
}

.title-wrapper {
    color: rgb(53, 58, 66);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.form-wrapper {
    & [class~='el-input'] {
        width: 360px;
    }

    & [class~='el-select'] {
        width: 360px;
    }
}
</style>
